<template>
  <view class="box" @touchmove.stop.prevent="() => {}">
    <view class="dintopt" :style="{ width: windowWidth + 'px' }">
      <!-- <baseHead :title="title" bg="#fff" color="#000" :showReturn="type ? true : false"
				:right="type ? false : true" text_right="发布职位" @clickRight="clickRight"></baseHead> -->
      <view class="titleCla" :style="{ 'padding-top': statusBarH + 10 + 'px' }">
        <view class="titleCla-top">
          <u-icon
            v-if="navigateToUrl == 1"
            @click="fanhui"
            name="arrow-left"
          ></u-icon>
          <view class="titleCla-top-left"> 职位管理 </view>
          <view class="">
            <u-search
              placeholder="搜索职位"
              v-model="keyword"
              @blur="blur"
              bgColor="#f1f2f6"
              :showAction="false"
              @clear="clear"
            >
            </u-search>
          </view>
          <view class="titleCla-top-right" @click="clickRight"> 发布 </view>
        </view>
        <view>
          <tablist
            :list="list1"
            @clickTabs="clickTabs"
            :tab="typeNumber"
          ></tablist>
        </view>
      </view>
      <!-- <view style="background-color: #fff">
				<tablist :list="list1" @clickTabs="clickTabs" :tab="typeNumber"></tablist>
			</view> -->
      <!-- <view style="padding: 20rpx 40rpx; background-color: #FFFFFF">
				<u-search placeholder="请输入" v-model="keyword" @blur="blur" bgColor="#f1f2f6" :showAction="false">
				</u-search>
			</view> -->
    </view>

    <scroll-view
      scroll-y
      class="scrollview"
      @scrolltolower="ReachBottom"
      :lower-threshold="50"
      v-if="datalist.length > 0"
      refresher-enabled="true"
      refresher-default-style="none"
      refresher-background="#f1f2f6"
      refresher-threshold="15"
      :refresher-triggered="loading"
      @refresherrefresh="onrefresh"
      :style="{
        height:
          navigateToUrl == 1
            ? windowHeight - customBarH - statusBarH + 'px'
            : windowHeight -
              safeAreaInsets -
              customBarH -
              statusBarH -
              50 +
              'px',
      }"
    >
      <u-loading-icon v-if="loading"></u-loading-icon>
      <uni-swipe-action class="swipe">
        <uni-swipe-action-item
          @click="deletejob(item)"
          class="swipe-item"
          :right-options="options"
          v-for="(item, index) in datalist"
          :key="index"
        >
          <view class="listdb">
            <view class="fl-sb jobListBox">
              <view class="JobBox">
                <view class="JobBox1">
                  <view class="leftJob">
                    <view class="JobName" @click.stop="clickNodeList(item)">
                      {{ item.JobName }}
                    </view>
                    <view
                      class="text zhiwei"
                      :class="{
                        publish: zhiwzt(item) == '发布中',
                        close: zhiwzt(item) == '已关闭',
                        ToBeReviewed: zhiwzt(item) == '待审核',
                        failed: zhiwzt(item) == '未通过',
                      }"
                    >
                      {{ zhiwzt(item) }}
                    </view>
                    <view class="zhidingCla" v-if="item.Stick == 1">
                      置顶
                    </view>
                  </view>
                  <view class="rightJob">
                    <view class="jilu size14" @click="goutongguoClick(item)"
                      >{{ item.ChatCount }}
                    </view>
                    <view class="jilu size14" @click="ResumeSubmitted(item)">
                      {{ item.FavoritesCount }}
                    </view>
                  </view>
                </view>
                <view class="JobBox1">
                  <view class="leftJob">
                    <view class="text"
                      >{{ item.ProvinceCodename }}<span>|</span></view
                    >
                    <view class="text"
                      >{{ item.Experience }}<span>|</span></view
                    >
                    <view class="text"
                      >{{ item.EducationCn }}<span>|</span></view
                    >

                    <view class="text" v-if="3000 >= item.MaxWage">
                      {{ "3K以下" }}
                    </view>
                    <view class="text" v-else-if="item.MinWage >= 30000">
                      {{ "30K以上" }}
                    </view>
                    <view class="text" v-else>
                      {{
                        item.MinWage / 1000 + "-" + item.MaxWage / 1000 + "K"
                      }}
                    </view>
                  </view>
                  <view class="rightJob">
                    <view class="jilu">沟通过</view>
                    <view class="jilu">感兴趣</view>
                  </view>
                </view>
              </view>
            </view>
            <view class="fl-sb listfoot" v-if="item.AuditStatus !== 0">
              <!-- <view class="listfoottext" @click.stop="editChange(item)">
											<view ><image src="/static/image/zwgl/2.png" alt="" ></view>
											<view class="listfoottext_size">刷新</view>
										</view> -->
              <view
                class="listfoottext"
                @click.stop="shuxinClick(item)"
                v-if="item.Display == 0 && item.AuditStatus == 1"
              >
                刷新
              </view>
              <view
                class="listfoottext"
                @click.stop="zdeditclick(item)"
                v-if="item.Display == 0 && item.AuditStatus == 1"
              >
                置顶
              </view>
              <view class="listfoottext" @click.stop="editChange(item)">
                编辑
              </view>
              <!-- // Display 0显示 1不显示 -->
              <view
                class="listfoottext"
                v-if="item.Display == 1 && item.AuditStatus != 2"
                @click.stop="xiangshi(item)"
              >
                上架
              </view>
              <view
                class="listfoottext"
                v-if="item.Display == 0 && item.AuditStatus != 2"
                @click.stop="xiangshi(item)"
              >
                下架
              </view>
              <!-- <view class="listfoottext" @click.stop="deletejob(item)">
								<view>
									<image src="/static/image/zwgl/4.png" alt="" class="imgdeda" />
								</view>
								<view class="listfoottext_size" style="color: #e62020">删除</view>
							</view> -->
            </view>
          </view>
        </uni-swipe-action-item>
      </uni-swipe-action>

      <u-loadmore :status="status" />
    </scroll-view>

    <u-empty
      v-else
      mode="data"
      icon="/static/recruit/index/qsy.png"
      width="350"
      marginTop="150"
    >
    </u-empty>
  </view>
</template>

<script>
import baseHead from "@/pages/component/baseHead.vue";
import tablist from "@/pages/component/tablist/index.vue";
import area from "@/pages/component/area.js";
export default {
  data() {
    return {
      statusBarH: 0, //状态栏高度
      customBarH: 0, //导航栏高度
      windowWidth: 0, //窗口宽度
      windowHeight: 0, //窗口高度
      safeAreaInsets: 0, //底部导航栏
      areaOptions: area, //地址
      keyword: "",
      list1: [
        {
          id: "",
          name: "全部",
        },
        {
          id: 1,
          name: "发布中",
        },
        {
          id: 2,
          name: "已关闭",
        },
        {
          id: 3,
          name: "待审核",
        },
        {
          id: 4,
          name: "未通过",
        },
      ],
      datalist: [],
      status: "loadmore",
      typeNumber: 0,
      // AuditStatus 0未审核 1已审核 2审核失败
      // Display 0显示 1不显示
      obj: {
        JobName: "",
        AuditStatus: "",
        Display: "",
        PageIndex: 1,
        PageSize: 10,
      },
      options: [
        {
          text: "删除",
          style: {
            backgroundColor: "#F35370",
          },
        },
      ],
      navigateToUrl: 0,
      loading: false,
    };
  },
  watch: {
    "$store.state.upData": {
      handler(val) {
        this.datalist = [];
        this.listdata();
      },
    },
  },
  //子组件
  components: {
    baseHead,
    tablist,
  },
  props: {
    type: {
      type: Number,
    },
  },
  onLoad(e) {
    this.navigateToUrl = e.type;
  },
  // 创建完成立即调用
  created() {
    const app = getApp();
    this.corpId = app.globalData.userCorpId;
    // 获取状态栏和导航条高度 窗口宽度
    this.statusBarH = app.globalData.statusBarH;
    this.customBarH = app.globalData.customBarH;
    this.windowWidth = app.globalData.phoneInformation.windowWidth;
    this.windowHeight = app.globalData.phoneInformation.windowHeight;
    this.safeAreaInsets = app.globalData.phoneInformation.safeAreaInsets.bottom;
    if (this.type) {
      let arr = this.list1.filter((item) => {
        return item.id == this.type;
      })[0];
      let num = this.list1.findIndex((item) => {
        return item.id == this.type;
      });
      this.typeNumber = num;
      this.clickTabs(arr, num);
    } else {
      this.listdata();
    }
  },
  // 点击 tab 时触发，参数为Object
  onTabItemTap() {},
  // 计算属性
  computed: {},
  filters: {
    ellipsis(value) {
      if (!value) return "";
      if (value.length > 3) {
        return value.slice(0, 3) + "...";
      }
      return value;
    },
  },
  // 计算方法
  methods: {
    onrefresh() {
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
        this.listdata();
      }, 1000);
    },
    //左上角返回按钮
    fanhui() {
      uni.navigateBack();
    },
    //刷新
    shuxinClick(item) {
      this.$http.plan
        .checkPlanFeature({
          corpId: item.CorpId,
          searchType: 2,
          jobId: item.Id,
        })
        .then((res) => {
          if (res.Success) {
            if (res.Result.IsEnabled) {
              this.$http.huirc
                .actionsstick({
                  Id: item.Id,
                })
                .then((res) => {
                  this.obj = {
                    ...this.obj,
                    PageIndex: 1,
                  };
                  this.$util.toast("职位已刷新~~");
                  this.datalist = [];
                  this.status = "loadmore";
                  this.listdata();
                });
            } else {
              this.$util.toast("会员权益点数已经消耗完，明天再来吧~~");
            }
          }
        });
    },

    zdeditclick(item) {
      this.$http.plan
        .checkPlanFeature({
          corpId: item.CorpId,
          searchType: 5,
          jobId: item.Id,
        })
        .then((res) => {
          if (res.Success) {
            if (res.Result.IsEnabled) {
              this.$http.huirc
                .actionsstick({
                  Id: item.Id,
                })
                .then((res) => {
                  this.obj = {
                    ...this.obj,
                    PageIndex: 1,
                  };
                  this.$util.toast("职位置顶成功~~");
                  this.datalist = [];
                  this.status = "loadmore";
                  this.listdata();
                });
            } else {
              this.$util.toast("会员权益点数已经消耗完，明天再来吧~~");
            }
          }
        });
    },
    listdata() {
      // console.log(33);
      this.$http.huirc.joblist(this.obj).then((res) => {
        if (res.Result) {
          if (res.Result.Items.length == 0) {
            // 没有数据----
            this.status = "nomore";
            return;
          }
          this.datalist = res.Result.Items;
          this.datalist.forEach((item) => {
            this.areaOptions.forEach((item2) => {
              item2.children.forEach((item3) => {
                if (item.CityCode == item3.value) {
                  if (item3.label == "市辖区") {
                    item.ProvinceCodename = item2.label;
                  } else {
                    item.ProvinceCodename = item3.label;
                  }
                }
              });
            });
          });
          if (res.Result.Items.length >= this.obj.PageSize) {
            this.obj.PageSize++;
            // 表示还有数据
          } else {
            //没有更多数据了
            this.status = "nomore";
          }
        }
      });
    },
    ReachBottom() {
      // 加载前值为loadmore，加载中为loading，没有数据为nomore
      if (this.status != "nomore") {
        this.status = "loading";
        this.listdata();
      }
    },
    zhiwzt(item) {
      let AuditStatus = item.AuditStatus;
      let Display = item.Display;
      let zt = "";
      // 态 0未审核 1已审核 2审核失败
      if (AuditStatus == "1") {
        //zt = "未通过"
        if (Display == "0") {
          zt = "发布中";
        } else {
          zt = "已关闭";
        }
      } else if (AuditStatus == "2") {
        zt = "未通过";
      } else {
        zt = "未审核";
      }
      return zt;
    },
    blur() {
      this.obj = {
        ...this.obj,
        JobName: this.keyword,
        PageIndex: 1,
      };
      this.datalist = [];
      this.status = "loadmore";
      this.listdata();
    },
    clear() {
      console.log("dianji");
      this.obj = {
        ...this.obj,
        JobName: "",
        PageIndex: 1,
      };
      this.datalist = [];
      this.status = "loadmore";
      this.listdata();
    },
    clickTabs(item, index) {
      if (item.id == this.tablet) {
        return;
      }
      // AuditStatus 0未审核 1已审核 2审核失败
      // Display 0显示 1不显示
      if (item.id == "1") {
        this.obj = {
          ...this.obj,
          AuditStatus: 1,
          Display: 0,
          PageIndex: 1,
        };
      } else if (item.id == "2") {
        this.obj = {
          ...this.obj,
          AuditStatus: 1,
          Display: 1,
          PageIndex: 1,
        };
      } else if (item.id == "3") {
        this.obj = {
          ...this.obj,
          AuditStatus: 0,
          PageIndex: 1,
        };
      } else if (item.id == "4") {
        this.obj = {
          ...this.obj,
          AuditStatus: 2,
          PageIndex: 1,
        };
      } else {
        this.obj = {
          ...this.obj,
          AuditStatus: "",
          PageIndex: 1,
          Display: "",
        };
      }
      this.typeNumber = index;
      this.datalist = [];
      this.status = "loadmore";
      this.listdata();
    },
    deletejob(item) {
      let that = this;
      uni.showModal({
        title: "删除提示",
        content: "确认要删除这条数据",
        success: function (res) {
          if (res.confirm) {
            let del = {
              Ids: [item.Id],
            };
            that.$http.huirc.jobdel(del).then((res) => {
              if (res.Success) {
                that.$util.toast("删除成功");
                that.datalist = [];
                that.status = "loadmore";
                that.listdata();
              }
            });
          }
        },
      });
    },
    editChange(item) {
      let int = item.Id;
      uni.navigateTo({
        url: `/pages/views/packageC/type-recruit/zhiwei/addindex?key=${int}`,
      });
    },
    xiangshi(item) {
      let that = this;
      this.$http.huirc
        .jobactionsdisplay({
          Id: item.Id,
        })
        .then((res) => {
          if (res.Success) {
            // that.$util.toast("更新成功");
            that.obj = {
              ...that.obj,
              PageIndex: 1,
            };
            that.datalist = [];
            that.status = "loadmore";
            that.listdata();
          }
        });
    },
    clickNodeList(item) {
      uni.navigateTo({
        url:
          "/pages/views/packageA/type-jobhunting/search/JobDetails?id=" +
          item.Id,
      });
    },
    clickRight() {
      uni.navigateTo({
        url: "/pages/views/packageC/type-recruit/zhiwei/addindex",
      });
    },
    //沟通过点击事件
    goutongguoClick(item) {
      uni.navigateTo({
        url:
          "/pages/views/packageB/type-recruit/goutongguo?Id=" +
          JSON.stringify(item.Id),
      });
    },
    //感兴趣点击事件
    ResumeSubmitted(item) {
      uni.navigateTo({
        url:
          "/pages/views/packageB/type-recruit/miashi/zhiweiguanliganxingqu?Id=" +
          JSON.stringify(item.Id),
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  position: fixed;
}

.dintopt {
  width: 100%;
  background-image: url("/static/recruit/index/sybj.png");
  background-repeat: no-repeat;
  background-size: cover;

  .titleCla {
    .titleCla-top {
      display: flex;
      justify-content: space-around;
      align-items: center;

      .titleCla-top-left {
        font-size: 42rpx;
        font-weight: bold;
        color: #000000;
        margin-left: 20rpx;
      }

      .titleCla-top-right {
        font-size: 28rpx;
        font-weight: bold;
        color: #000000;
        margin-right: 20rpx;
      }
    }
  }
}

.scrollview {
  // height: calc(100vh - 270rpx);
  // // #ifdef  H5
  // height: calc(100vh - 300rpx);
  // // #endif
  // box-sizing: border-box;

  .swipe {
    .swipe-item {
      margin: 20rpx;
      border-radius: 10rpx;
    }
  }

  .listdb {
    padding: 20rpx 40rpx;
    border-radius: 10rpx;
    background-color: #fff;

    .jobListBox {
      .JobBox {
        width: 100%;
        display: flex;
        flex-direction: column;

        .JobBox1 {
          width: 100%;
          display: flex;
          justify-content: space-between;
          padding: 20rpx 0rpx;
        }

        .leftJob {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          flex: 1;

          span {
            margin-left: 10rpx;
            margin-right: 10rpx;
          }
        }

        .rightJob {
          width: 160rpx;
          display: flex;
          align-items: center;
          font-size: 24rpx;

          .jilu {
            flex: 1;
            text-align: center;
          }

          .size14 {
            font-size: 32rpx;
            font-weight: 500;
          }
        }

        .JobName {
          font-size: 32rpx;
          font-weight: 600;
          max-width: 360rpx;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          -o-text-overflow: ellipsis;
        }
      }

      .batst {
        padding: 0rpx 1rpx;
        margin: 0rpx 20rpx;
        height: 25rpx;
        box-sizing: border-box;
        background-color: #313131;
        display: inline-block;
      }
    }

    .listfoot {
      width: 100%;
      justify-content: flex-end;
      padding: 16px 0 7px;
      margin-top: 20rpx;
      border-top: 1px solid #f5f5f5;

      .listfoottext {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 2%;
        // width: 23%;
        color: #268af1;
        font-size: 26rpx;
        font-weight: 400;
        width: 138rpx;
        height: 56rpx;
        border-radius: 31rpx 31rpx 31rpx 31rpx;
        border: 1rpx solid #3476fe;

        .img {
          width: 26rpx;
          height: 23.08rpx;
          margin-right: 20rpx;
        }

        .imgdeda {
          width: 24rpx;
          height: 24rpx;
          margin-right: 20rpx;
        }
      }
    }
  }

  ::-webkit-scrollbar {
    display: block !important;
    width: 4px !important;
    height: 10px !important;
    background-color: #00000000 !important;
  }

  ::-webkit-scrollbar-thumb {
    width: 4px;
    height: 10px !important;
    background-color: #c0c0c0;
  }
}

.zhiwei {
  border-radius: 8rpx;
  margin-left: 20rpx;
  font-size: 24rpx;
  padding: 2rpx 9rpx;
  margin-bottom: 2rpx;
}

.zhidingCla {
  border-radius: 8rpx;
  margin-left: 20rpx;
  font-size: 24rpx;
  padding: 2rpx 9rpx;
  margin-bottom: 2rpx;
  border: 1rpx solid #f35370;
  color: #f35370 !important;
}

.publish {
  border: 1rpx solid #00cf53;
  color: #00cf53 !important;
}

.close {
  border: 1rpx solid #707070;
  color: #707070 !important;
}

.ToBeReviewed {
  border: 1rpx solid #ff8000;
  color: #ff8000 !important;
}

.failed {
  border: 1rpx solid #c50000;
  color: #c50000 !important;
}

.text {
  color: #313131;
  font-size: 24rpx;
}
</style>